<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb20">
      <!--      TODO: 新增按钮权限控制-->
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['business:houseLock:create']"
                   v-if="!isAreaAdmin"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="品牌">
        <el-input v-model="queryParams.brandName" placeholder="请输入品牌" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="型号">
        <el-input v-model="queryParams.modelName" placeholder="请输入型号" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="MAC">
        <el-input v-model="queryParams.mac" placeholder="请输入序列号" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="房间">
        <el-input v-model="queryParams.houseAddress" placeholder="请输入房间" clearable style="width: 240px"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column label="名称" align="center" key="lockName" prop="lockName"
                       :show-overflow-tooltip="true"
      />
      <el-table-column label="品牌" align="center" key="brandName" prop="brandName"
                       :show-overflow-tooltip="true"
      />
      <el-table-column label="型号" align="center" prop="modelName"></el-table-column>
      <el-table-column label="MAC" align="center" prop="mac"></el-table-column>
      <el-table-column label="关联房间" align="center" key="houseAddress" prop="houseAddress"/>
      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime|formatDate('YYYY-MM-DD HH:mm') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="lockState">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.lockState === '1'">正常</el-tag>
          <el-tag type="warning" v-else-if="scope.row.lockState === '2'">冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!-- TODO: 按钮权限控制-->
          <el-button size="mini" type="text" @click="handleSettings(scope.row)"
                     v-hasPermi="['business:houseLock:updateLock']"
          >设置
          </el-button>
          <!--    区域管理员页面不显示    -->
          <template v-if="!isAreaAdmin">
            <el-button size="mini" type="text" @click="handleHouse(scope.row,1)"
                       v-hasPermi="['business:houseLock:changeRoom']"
            >修改房间
            </el-button>
            <el-button size="mini" type="text" @click=" handleOpenAuth(scope.row)"
                       v-hasPermi="['lock:lockFace:list']"
            >开门权限
            </el-button>
            <el-button size="mini" type="text" @click="handleRecord(scope.row)"
                       v-hasPermi="['business:houseLock:outerOpenDoorRecord']"
            >记录
            </el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
                       v-hasPermi="['business:houseLock:removeLock']"
            >删除
            </el-button>
          </template>

        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />
    <Add v-model="open" :title="title" @success="getList"/>
    <!-- 设置弹窗 -->
    <Settings v-model="settingVisible" :title="title" :data="form" @success="getList"/>
    <!--关联房间弹窗-->
    <AssociateRoom v-model="associateVisible" :title="title" :data="form" @success="getList"/>
    <!--修改房间弹窗-->
    <ModifiedRoom v-model="modifyVisible" :title="title" :data="form" @success="getList"/>
    <!--开门权限弹窗-->
    <OpenAuth v-model="openAuthVisible" :title="title" :data="form" @success="getList"/>
    <!-- 记录弹窗 -->
    <Record v-model="recordVisible" :title="title" :data="form" @success="getList"/>
  </div>
</template>

<script>
import Add from './components/add.vue'
import Settings from './components/settings.vue'
import AssociateRoom from './components/associated-room.vue'
import ModifiedRoom from './components/modified-room.vue'
import OpenAuth from './components/open-auth/index.vue'
import Record from './components/record'
import { listSweep, deleteSweep } from '@/api/houseCleaning/sweep'
import { listLock, listLockByArea, removeLock } from '@/api/smartLock/lockManage'
import { debounce } from '@/utils'

export default {
  name: 'Index',
  dicts: ['dict_sweep_state', 'sweep_type'],
  components: { Add, Settings, AssociateRoom, ModifiedRoom, OpenAuth, Record },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: null,
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        houseSweepId: undefined,
        fullAddress: undefined,
        sweepType: undefined,
        sweepState: undefined,
        homeSweepName: undefined,

        brandName: undefined,
        modelName: undefined,
        mac: undefined,
        jigou: undefined,
        houseAddress: undefined
      },
      //是否显示设置
      settingVisible: false,
      //是否显示关联房间
      associateVisible: false,
      //是否显示修改房间
      modifyVisible: false,
      //是否显示开门权限
      openAuthVisible: false,
      //是否显示记录
      recordVisible: false,
      //是否是区域管理员
      isAreaAdmin: false
    }
  },
  watch: {},
  created() {
    if (this.$route.name === 'AreaAdminHouseLock') {
      this.isAreaAdmin = true
    }
    this.getList()
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true
      let api = this.isAreaAdmin ? listLockByArea : listLock
      api(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        houseSweepId: undefined,
        fullAddress: undefined,
        sweepType: undefined,
        sweepState: undefined,
        homeSweepName: undefined,

        brandName: undefined,
        modelName: undefined,
        mac: undefined,
        jigou: undefined,
        houseAddress: undefined
      },
        this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.open = true
      this.title = '添加设备'
    },
    // 设置
    handleSettings(row) {
      this.settingVisible = true
      this.title = '设置'
      this.form = { ...row }
    },
    // type：0：关联房间/1：修改房间
    handleHouse(row, type) {
      this.form = { ...row }
      if (type === 0) {
        this.title = '关联房间'
        this.associateVisible = true
      } else if (type === 1) {
        this.title = '修改房间'
        this.modifyVisible = true
      }
    },
    // 解除关联
    lifted: debounce(function() {
      //   TODO: 解除关联
      this.$confirm('确认解除房间关联?', '提示', {}).then(() => {
        this.$message.success('解除关联成功')
        this.getList()
      }).catch(() => {
      })
    }, 500, true),
    // 开门权限
    handleOpenAuth(row) {
      //   TODO: 开门权限
      this.title = '开门权限'
      this.form = { ...row }
      this.openAuthVisible = true

    },
    // 记录
    handleRecord(row) {
      //   TODO: 记录
      this.title = '记录'
      this.form = { ...row }
      this.recordVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确认删除该设备?', '提示', {}).then(() => {
        this.loading = true
        removeLock(row.lockId).then((response) => {
          this.$message.success(response.msg || '删除成功')
          this.getList()
        }).catch((error) => {
          console.log(error)
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
